<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入ElementUI样式 -->
    <link type="text/css" rel="stylesheet" href="../css/index.css">
    <!-- 引入Vue组件库 -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script type="text/javascript" src="../js/index.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <link type="text/css" rel="stylesheet" href="../css/indexmain.css">
</head>
<body>
<div id="app">
    <!--header-->
    <el-row>
        <el-col :span="18" :offset="3">
            <div class="grid-content bg-purple">
                <img src="../img/logo.png" >
                <div class="header">
                    <ul>
                        <li>
                            <a href="/login.html" ><div class="icon-nav">
                                <i class="el-icon-user"></i>
                            </div><span class="nav-txt">信息门户</span></a>
                        </li>
                        <li>
                            <a href="reservation.jsp" ><div class="icon-nav">
                                <i class="el-icon-phone-outline"></i>
                            </div><span class="nav-txt">用户预约</span></a>
                        </li>
                        <li>
                            <a href="/login.html" ><div class="icon-nav">
                                <i class="el-icon-loading"></i>
                            </div><span class="nav-txt">English</span></a>
                        </li>
                        <li>
                            <a href="/login.html" ><div class="icon-nav">
                                <i class="el-icon-search"></i>
                            </div><span class="nav-txt">查询更多</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </el-col>
    </el-row>

    <!--预约-->
    <el-row>
        <el-col :span="24" >
            <div class="grid-content bg-purple">
                <div class="yq-banner">
                    <span class="yq-banner-inner"></span>
                </div>
            </div>
        </el-col>
    </el-row>

    <!--menu-->
    <el-row>
        <el-col :span="24"><div class=" bg-purple-dark" >
            <el-row>
                <el-col :span="18" :offset="3">
                    <el-menu
                            :default-active="activeIndex2"
                            class="el-menu-demo"
                            mode="horizontal"
                            @select="handleSelect"
                            background-color="#538191"
                            text-color="#fff"
                            style="font-family: '微软雅黑';font-size: 20px;"
                            active-text-color="#ffd04b">
                        <el-menu-item index="1">预约须知</el-menu-item>
                        <el-menu-item index="2">预约挂号</el-menu-item>
                        <el-menu-item index="3" >预约记录查询</el-menu-item>
                        <el-menu-item index="4">取消预约</el-menu-item>
                        <div style="float: right; color: cornsilk">
                            <el-menu-item index="5">
                                <i style="color: cornsilk"  class="el-icon-location-outline"></i>
                                <el-link style="color: cornsilk" :underline="false" href="/index.jsp" target="_blank">返回主页</el-link>
                            </el-menu-item>
                        </div>
                    </el-menu>
                </el-col>
            </el-row>
        </div>

        <!--预约-->
        <el-row>
            <el-col :span="18" :offset="3">
                <div class="grid-content bg-purple">
                    <div class="yq-banner">
                        <iframe :src="url"  frameborder="0" width="100%" height="1000px;"></iframe>
                    </div>
                </div>
            </el-col>
        </el-row>

        <!--footer-->
        <div id="footer">
            <div class="fot_bg">
                <div class="fot_bg_left">
                    <p>地 址 : P屏南县古峰镇长汾社区梨园路120号 &nbsp;Address: No. 1, Xianghe Road, Xinzheng, P. R. China<br>邮 编 : 451191
                        &nbsp; &nbsp;招生电话: 0371-62508666 &nbsp; &nbsp;451191 &nbsp; TEL: +86-0371-62508666<br>版权所有 :
                        Copyright©2007-2022 Henan University of Engineering , - 网站地图 - <span><img
                                src="" title="" alt=""
                                width="16" height="16"></span><a href="https://beian.miit.gov.cn/">豫ICP备
                            14017577号-2</a></p>
                </div>
            </div>
            <div class="fot_bg_mid">
                <ul>

                    <li><img src="../img/fw/wb_img.png"><span>官方微博</span>
                    </li>
                    <li><img src="../img/fw/wx_img.png"><span>官方微信</span>
                    </li>

                </ul>
            </div>
            <div class="fot_bg_right">
                <ul>
                    <li><a href="" title=""
                           onclick='_addDynClicks("wburl", 1681657356, 59790)'>新闻网</a></li>
                    <li><a href="" title=""
                           onclick='_addDynClicks("wburl", 1681657356, 59791)'>招聘网</a></li>
                    <li><a href="" title=""
                           onclick='_addDynClicks("wburl", 1681657356, 59792)'>人才引进</a></li>
                    <li><a href="" title="" onclick='_addDynClicks("wburl", 1681657356, 59793)'>校历</a></li>
                    <li><a href="" title="" onclick='_addDynClicks("wburl", 1681657356, 59794)'>医院地图</a></li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>

</div>


<script>
    new Vue({
        el: "#app",
        data: {
            activeIndex2: '1',
            url:'afterKnow.jsp',
            editableTabs: [{
                title: '预约须知',
                name: '1',
                url: 'afterKnow.jsp'
            },{
                title: '预约挂号',
                name: '2',
                url: '/appointment/appointmentsectionchoose.html'
            },{
                title: '预约记录查询',
                name: '3',
                url: 'resultSelect.jsp'
            },{
                title: '取消预约',
                name: '4',
                url: 'cancelReservation.jsp'
            }],
        },
        created() {

        },
        methods: {
            handleSelect(key, keyPath) {
                for(let i = 0 ; i < this.editableTabs.length; i++ ){
                    if(this.editableTabs[i].name === key){
                        this.url = this.editableTabs[i].url;
                    }
                }
            },
        },
    })
</script>

</body>
</html>